<template>
  <el-row style="background:#fff;padding: 40px 0;margin:10px 0">
    <el-col :offset="0" :span="12">
      <v-chart class="chart" :option="option" ref="ref_chart" />
    </el-col>
    <el-col :offset="3" :span="6">
      <!-- 标签云 -->
      <tag-cloud v-if="this.lableName.length" :lableName="this.lableName"></tag-cloud>
    </el-col>
    <el-col :offset="3" :span="6">
      <!-- 标签云 -->
      <tag-cloud v-if="this.lableName.length" :lableName="this.lableName"></tag-cloud>
    </el-col>
  </el-row>
</template>

<script>
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { LabelLayout } from 'echarts/features'
import {
  ToolboxComponent,
  TooltipComponent,
  TitleComponent,
  LegendComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import TagCloud from './TagCloud.vue'

use([
  ToolboxComponent,
  LegendComponent,
  PieChart,
  CanvasRenderer,
  TitleComponent,
  LabelLayout,
  TooltipComponent
])

export default {
  name: 'LableEcharts',
  components: {
    VChart,
    TagCloud
  },
  mounted () {
    this.$axios.get('/article/label').then(res => {
      this.option.series[0].data = res.data.info.map(item => {
        this.lableName.push(item.labelName)
        return {
          name: item.labelName,
          value: item.articleCount
        }
      })
    })
  },
  data () {
    return {
      lableName: [],
      option: {
        title: {
          text: '文章分类',
          left: 'center'
        },
        legend: {
          top: 'bottom'
        },
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {c} '
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: '文章分类',
            type: 'pie',
            radius: [30, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
            ]
          }
        ]
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.chart {
  height: 300px;
  margin-top: 30px;
  padding-right: 50px;
}
</style>
